<template>
	<view class="container">
		<view class="cu-bar search">
			<view class="search-form round" style="background-color: #fff;margin: 0;">
				<text class="cuIcon-search"></text>
				<input @input="InputFocus" v-model="searchName" :adjust-position="false" type="text"
					placeholder="搜索项目名称" confirm-type="search" />
			</view>
			<!-- <view class="action">
					<button class="cu-btn bg-green shadow-blur round" @tap="searchList">搜索</button>
				</view> -->
		</view>
		<!-- 新闻列表 -->
		<view class="news-list">
			<view class="news-item" v-for="item in CompetitionList" :key="item.id" @click="this.$openrul(`/pages/taskDetail/taskDetail?id=${item.id}`)">
				<view class="news-item__content">
					<view class="news-item__content__title">{{ item.name }}</view>
					<view class="">
						<!-- <rich-text class="news-item__content__desc" :nodes="item.detail"></rich-text> -->
						<text class="news-item__content__desc">{{ item.info }}</text>
					</view>
					<!-- 时间 -->
					<view class="news-item__content__time">{{ item.createtime.split(' ')[0] }}</view>
					<view class="news-item__content__author">
						<view class="tx">
							<view class="cu-avatar sm round" :style="{'background-image':`url(${domainPrefix + item.teacher.avatar})`}"></view>
						</view>
						<view class="autname">
							{{ item.teacher.nickname }}
						</view>
					</view>

				</view>

				<view class="news-item__image">
					<image :src="domainPrefix + item.image" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import loginjs from '../../core/login'
export default {
	data() {
		return {
			searchName: '',
			domainPrefix:'',
			CompetitionList:[],
			getCompetitionForm:{
				name:'',
				teacher_id:'',
				status:'',
				page:1,
				limit:10,
			},
			
		}
	},
	  onShow(){
	    this.islogin()
	
	},
	onLoad(query) {
		// let token = JSON.parse(uni.getStorageSync('vuexvuex'))
		// var parsedData = JSON.parse(token.value);
		// var tokenValue = parsedData.userinfo.token; 
		let domainPrefix = this.$myHttp.config.baseUrl;
		this.domainPrefix = domainPrefix.replace(/\/$/, '');
	
		this.getCompetitionTaskList()
	
	},
	methods: {
		   islogin() {
		
		      if (loginjs.checkIfLogin() == false) {
		        this.loginFlag = false
		        // 弹窗提示请登录后操作
		        uni.showToast({
		          title: '请先登录',
		          icon: 'none',
		          mask: true,
		          duration: 1000,
		        })
		
		        uni.navigateTo({
		          url: '/pages/auth/login/index'
		
		        })
		
		      }
		},
		InputFocus(e) {
			clearTimeout(this.timer);
			// 清除之前的定时器
			// 创建一个新的定时器
			this.timer = setTimeout(() => {
				this.searchList(e.detail.value)
			}, 500); // 设置防抖延迟时间为500毫秒
		},
		// 当搜索框内为空时重新请求列表
		async InputBlur(e) {
			console.log('e: ', e)
			this.InputBottom = 0
			if (e.detail.value == '') {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.getProjectList,
					data: {
						name: this.searchName,
						isHis: false,
						page: 1,
						limit: this.limit,
					}
				})
		
				this.projectList = res.data.data
		
			}
		
		},
		async searchList(keyword) {
		
		
		
		
			// this.InputBottom = 0
			
			if (this.searchName !== '') {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.getCompetitionList,
					data: {
						name: this.searchName,
						page:1,
						
						limit: 1000,
					}
				})
		
				this.CompetitionList = res.data.data
				console.log('searchAfter,this.projectList: ', this.projectList)
		
				// this.projectListTotal = res.data.total
			} else{
				this.getCompetitionTaskList()
			}
		
		
			// 使用 Set 来存储已经存在的数据
			// let existingData = new Set(this.projectList.map(item => item.id));
		
			// 过滤掉已经存在的数据
			// let newData = res.data.data.filter(item => !existingData.has(item.id));
		
			// 将新数据添加到项目列表中
			// this.projectList = this.projectList.concat(newData);
		
		
		},
		async getCompetitionTaskList(){
			let res = await this.$myHttp.post({
				
				url: this.$myHttp.urlMap.getCompetitionList,
				data: this.getCompetitionForm
			})
			this.CompetitionList = res.data.data
			console.log('this.CompetitionList: ', this.CompetitionList)

		},
		gotoTaskDetail() {
			uni.navigateTo({
				url: '/pages/taskDetail/taskDetail'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	
.container {
	padding: 10px;
	background-color: #f5f5f5;
}

.news-list {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.news-item {
	border-radius: 5px;
	width: 100%;
	height: 110px;
	background-color: #fff;
	border-bottom: 1px solid #eee;
}

.news-item__content {
	position: relative;
	box-sizing: border-box;
	padding: 8px;
	width: 70%;
	height: 100%;
	float: left;
}

.news-item__content__title {
	padding-bottom: 4px;
	font-size: 18px;
	font-weight: 800;
	/* line-height: 100px; */
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.news-item__content__desc {
	font-size: 12px;
	line-height: 16px;
	/* line-height: 100px; */
	/* 副标题超过两行显示省略号 */
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.news-item__content__time {
	position: absolute;
	left: 10px;
	bottom: 14px;
	color: #999;
	font-size: 12px;

}


.news-item__content__author {
	position: absolute;
	right: 10px;
	bottom: 5px;
	color: #999;
	font-size: 12px;
	width: 50%;
	display: flex;
	flex-direction: row;
	line-height: 27px;
	gap: 8px;

}


.news-item__content__author .tx {
	width: 27px;
	height: 27px;
}

.news-item__content__author .autname {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 5rpx;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.news-item__image {
	box-sizing: border-box;
	padding: 10px;
	width: 30%;
	height: 100%;
	float: left;
}

.news-item__image image {
	width: 100%;
	height: 100%;
}
</style>
